<ui:composition template="WEB-INF/facelets/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="title">
        Browse maps - 
    </ui:define>

    <ui:define name="extrascript">
        <script type="text/javascript" src="./mapeditor/MapEditor.js" />
        <script type="text/javascript" src="./js/browsemap.js" />
    </ui:define>

    <ui:define name="PageName">
        Browse Maps
    </ui:define>

    <ui:define name="content">
        <div id="browseMapTable">
            <table align="center" border="0" style="border: 3px dotted white; border-spacing: 0px;">
                <tr style="background-image: url(img/tdbg2.png); background-repeat: repeat-x; background-color: white;">
                    <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;"><b><h1>Map Name</h1></b></td>
                    <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;"><b><h1>Creator</h1></b></td>
                    <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;"><b><h1>Rate</h1></b></td>
                    <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;"><b><h1>Download</h1></b></td>
                    <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;"><b><h1>Comment</h1></b></td>
                </tr>    
                <c:forEach var="snakeMap" items="#{DatabaseBean.snakeMapList}">
                    <tr class="mapRow" style="background-image: url(img/tdbg.png); background-repeat: repeat-x; background-color: white;">

                        <td  class="mapName" style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;">
                            <div id="#{snakeMap.id}" class="mapNameDiv">
                                <h2>#{snakeMap.mapName}</h2>
                            </div>
                        </td>
                        <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;">
                            <h2><i>#{snakeMap.userName.userName}</i></h2>
                        </td>
                        <td class="stars" style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;">
                            <img src="img/star_gray.png" border="0" class="#{snakeMap.id}" />
                            <img src="img/star_gray.png" border="0" class="#{snakeMap.id}" />
                            <img src="img/star_gray.png" border="0" class="#{snakeMap.id}" />
                            <img src="img/star_gray.png" border="0" class="#{snakeMap.id}" />
                            <img src="img/star_gray.png" border="0" class="#{snakeMap.id}" />
                        </td>
                        <td style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;">
                            <div id="downloadLink">
                                <h2><a href="./editmap?action=get&amp;id=#{snakeMap.id}">DOWNLOAD</a></h2>
                            </div>
                        </td>
                        <td class="commentButtons" style="border-right: 1px solid black; padding-left: 10px; padding-right: 10px;">
                                <div class="buttonstyle" id="#{snakeMap.id}" style="cursor : pointer; width : 120px;"><h3 align="center">Add Comment</h3></div>
                        </td>
                    </tr>    
                </c:forEach>
            </table>
        </div>

        <div id="mapView" style="visibility: hidden; position: fixed;">
            <ui:include src="browsemaps-Content/mapView.xhtml"/>
        </div>

        <div id="commentView" style="visibility: hidden; position: fixed;">
            <ui:include src="browsemaps-Content/commentView.xhtml"/>
        </div>
    </ui:define>
</ui:composition>